.comp-data-preview {
  background: #fff;
  max-width: 620px;
  min-height: 80px;
  min-width: 180px;

  /deep/ .plTableBox {
    &.select-all {
      min-width: 320px;

      .el-table__row {
        background: rgba(103, 113, 252, 0.1);
      }
    }

    &.delete-all {
      min-width: 320px;

      .el-table__row {
        background: rgba(244, 16, 16, 0.1);

        td {
          border-bottom-color: transparent;
        }

        .cell {
          overflow: visible;
          position: relative;

          &::after {
            background: #5d637e;
            content: ' ';
            height: 1px;
            left: -2px;
            opacity: 0.6;
            position: absolute;
            top: 50%;
            width: calc(100% + 4px);
            z-index: 1;
          }

        }
      }

      td:first-child {
        .cell::after {
          left: 10px;
        }
      }

      td:last-child {
        .cell::after {
          width: calc(100% - 10px);
        }
      }

    }

    &.del-2n {
      .el-table__row:nth-child(2n) {
        background: rgba(244, 16, 16, 0.1);

        td {
          border-bottom-color: transparent;
        }

        .cell {
          overflow: visible;
          position: relative;

          &::after {
            background: #5d637e;
            content: ' ';
            height: 1px;
            left: -2px;
            opacity: 0.6;
            position: absolute;
            top: 50%;
            width: calc(100% + 4px);
            z-index: 1;
          }

        }

        td:first-child {
          .cell::after {
            left: 10px;
          }
        }

        td:last-child {
          .cell::after {
            width: calc(100% - 10px);
          }
        }
      }
    }

    .el-table th .cell {
      color: #5d637e;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 1.12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .el-table__row td {
      padding-bottom: 4px;
      padding-top: 4px;
    }
  }

  .preview-box {
    display: flex;
    flex-flow: row nowrap;
    width: 356px;

    &.ext {
      width: 540px;
    }

    .tb-head .th,
    .tr .td {
      flex: 1;
    }

    .table-preview-after {
      &.del-all {
        .tb-head .th {
          background: #fff9e2;
          font-weight: 500;
          position: relative;

          &::after {
            background: #5d637e;
            content: ' ';
            height: 1px;
            left: 0;
            position: absolute;
            top: 50%;
            width: 100%;

          }

          &:last-child {
            &::after {
              left: 0;
              width: calc(100% - 12px);
            }
          }

          &:first-child {
            &:last-child {
              &::after {
                left: 6px;
                width: calc(100% - 12px);
              }
            }

            &::after {
              left: 6px;
              width: calc(100% - 6px);
            }
          }
        }

        .tr .td {
          position: relative;

          &::after {
            background: #5d637e;
            content: ' ';
            height: 1px;
            left: 0;
            position: absolute;
            top: 16px;
            width: 100%;

          }

          &:last-child {
            &::after {
              left: 0;
              width: calc(100% - 12px);
            }
          }

          &:first-child {
            &:last-child {
              &::after {
                left: 6px;
                width: calc(100% - 12px);
              }
            }

            &::after {
              left: 6px;
              width: calc(100% - 6px);
            }
          }
        }
      }

      .tb-head {
        display: flex;
        flex-flow: row nowrap;
      }
    }

    &.mutiple-mode {
      overflow: hidden;
      width: 600px;

      .left ,
      .right {
        width: 50%;

        .table-box {
          overflow-x: scroll;
          width: 100%;

          &::-webkit-scrollbar {
            height: 6px;
            width: 4px;
          }

          &::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, 0.5);
            border-radius: 6px;
          }

          &::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 0;
          }
        }
      }

      .right {
        width: calc(50% - 10px);
      }

      .table-preview-after {
        overflow: hidden;
        width: auto;

        .tb-head .th {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .header {
      color: #5d637e;
      font-size: 14px;
      height: 44px;
      letter-spacing: 1px;
      padding: 16px 16px 0;
    }

    .table-preview-before {
      overflow: hidden;
      width: 100%;

      &.del-all {
        .tb-head {
          background: rgba(103, 113, 252, 0.1);
          font-weight: 500;
        }
      }

      &.mutiple {
        .tb-head {
          display: flex;
          flex-flow: row;
          flex-wrap: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .th {
            flex: 1;
            width: auto;
          }
        }
      }
    }

    .left {
      border-right: 1px solid #e9e9e9;
      width: 50%;
    }

    .right {
      width: 50%;
    }

    .tb-head {
      width: 100%;

      .th {
        font-size: 14px;
        font-weight: 400;
        overflow: hidden;
        padding: 8px 16px;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .left .tr {
      background: rgba(103, 113, 252, 0.1);

      td {
        width: 80px;
      }
    }

    .right .tr {
      background: rgba(255, 249, 226, 1);
    }

    .tr {
      display: flex;
      flex-flow: row;
      flex-wrap: nowrap;

      .td {
        color: #5d637e;
        display: block;
        flex: 1;
        font-size: 12px;
        letter-spacing: 1.12px;
        overflow: hidden;
        padding: 8px 16px;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;

        span {
          display: inline-block;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
        }
      }
    }

    &.selected-null {
      .left .tr,
      .right .tr {
        background: transparent;
      }

      .left .tr .null {
        background: rgba(103, 113, 252, 0.1);
      }

      .right .tr .null {
        background: rgba(255, 249, 226, 1);
      }
    }

    &.keyword {
      // 同时显示关键字和选中单元格
      // .left .tr,
      // .right .tr {
      //   background: transparent;
      // }

      /deep/.left .tr .td .word {
        background: rgba(103, 113, 252, 0.1);
        position: relative;

        &::before,
        &::after {
          background: rgba(103, 113, 252, 0.1);
          content: ' ';
          height: 6px;
          left: 0;
          position: absolute;
          width: 100%;
        }

        &::before {
          top: -6px;
        }

        &::after {
          bottom: -6px;
        }
      }

      /deep/ .right .tr .td .word {
        background: rgba(255, 249, 226, 1);
        position: relative;

        &::before,
        &::after {
          background: rgba(255, 249, 226, 1);
          content: ' ';
          height: 6px;
          left: 0;
          position: absolute;
          width: 100%;
        }

        &::before {
          top: -6px;
        }

        &::after {
          bottom: -6px;
        }
      }
    }

  }
}

.select-null-cell-box {
  padding: 2px 12px 12px;

  .header {
    color: #5d637e;
    font-family: 'Microsoft YaHei', '微软雅黑', 'Arial Narrow', Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1.12px;
    line-height: 18px;
    padding: 8px 16px;
    text-align: center;
  }

  .cell {
    color: #5d637e;
    font-size: 12px;
    height: auto;
    letter-spacing: 1.12px;
    line-height: 12px;
    margin-bottom: 1px;
    min-height: 28px;
    min-width: 120px;
    overflow: hidden;
    padding: 6px 8px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      background: rgba(103, 113, 252, 0.1);
    }

    &.null {
      background: rgb(103, 113, 252);
      opacity: 0.1;
    }
  }
}

/deep/ .cell {
  overflow: hidden;

  .data-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
}

.info-box {
  height: 100%;
  min-height: 120px;
  width: 100%;

  .spinner,
  .msg-no-data {
    color: #888;
    font-size: 12px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    vertical-align: middle;
  }
}
